<template>
	<div style="height:3000px">
		<!-- 采购需求查看 --页面 -->
		<v-card>
			<v-card-title>
				<v-btn class="ml-2 mt-1" small tile color="primary" @click="openCreatePurchaseDialog">
					创建采购请购单
				</v-btn>
				<v-divider class="mx-4" inset vertical></v-divider>
				<v-row class="mt-2">
					<v-col cols="12" md="1">
						<v-text-field label="单据编号" v-model="query.code" dense outlined>
						</v-text-field>
					</v-col>
					<v-col cols="12" md="1">
						<v-text-field label="存货编号" v-model="query.inventorycode" dense outlined>
						</v-text-field>
					</v-col>
					<v-col cols="12" md="1">
						<v-text-field label="存货名称" v-model="query.inventoryname" dense outlined>
						</v-text-field>
					</v-col>
					<!-- ml-n16 前面加n是间距 -->
					<!-- class="ml-n16 mx-auto" -->
					<v-col cols="12" md="2">
						<v-btn depressed color="primary" @click="loadPages">查询</v-btn>
						<v-btn class="ml-3" depressed color="primary" @click="refreshLoadPages">
							重置</v-btn>
					</v-col>
				</v-row>
			</v-card-title>
			<v-card-text>
				<v-data-table :headers="purchaseNeedHeaderList" :items="purchaseNeedDataList" small fixed-header
					item-key="id" dense show-select class="text-no-wrap" loading-text="正在加载请稍等......"
					:loading="purchaseNeedLoading" :options.sync="purchaseNeedOptions" show-expand single-expand
					:footer-props="vuetifyDefaultPage" :server-items-length="purchaseNeedTotalCount">
					<template v-slot:item.actions="{ item }">
						<div>
							<v-btn class="ml-1" small tile color="primary" :disabled="item.issenderp"
								@click="editPurchaseDialog=true,purchaseNeedModel=item">
								编辑
							</v-btn>
							<v-btn class="ml-1" small tile color="primary" :disabled="item.issenderp"
								@click="sendTOERP(item)">
								提交ERP
							</v-btn>
						</div>
					</template>
					<template v-slot:item.issenderp="{item}">
		
							<a  v-if="item.issenderp==1" style="color: #67C23A;">是</a>
							<a  v-else>否</a>

					</template>
					<template v-slot:expanded-item="{ headers, item }">
						<td :colspan="headers.length">
							<v-data-table :headers="purchaseNeedDetailHeaderList" :items="item.detailList" small
								fixed-header item-key="id" dense show-select class="text-no-wrap"
								loading-text="正在加载请稍等......"></v-data-table>
						</td>
					</template>
				</v-data-table>
			</v-card-text>
		</v-card>

		<v-dialog v-model="editPurchaseDialog" width="900">
			<v-card>
				<v-card-title>编辑采购请购单</v-card-title>
				<v-card-text>
					<v-container>
						<v-expansion-panels>
							<v-expansion-panel>
								<v-expansion-panel-header>
									选中的需采购的外购件
								</v-expansion-panel-header>
								<v-expansion-panel-content>
									<v-simple-table dense fixed-header class="text-no-wrap">
										<template v-slot:default>
											<thead>
												<tr>
													<th class="text-center">
														操作
													</th>
													<th class="text-center">
														请购人员
													</th>
													<th class="text-center">
														请购部门
													</th>
													<th class="text-center">
														存货编码
													</th>
													<th class="text-center">
														存货名称
													</th>
													<th class="text-center">
														数量
													</th>
													<th class="text-center">
														单价
													</th>
													<th class="text-center">
														需求日期
													</th>
													<th class="text-center">
														税率
													</th>
													<th class="text-center">
														建议订货日期
													</th>
													<th class="text-center">
														供应商编码
													</th>
													<th class="text-center">
														供应商名称
													</th>
													<th class="text-center">
														关联的项目设备
													</th>
													<th class="text-center">
														关联的项目号
													</th>
													<th class="text-center">
														关联的项目名称
													</th>
												</tr>
											</thead>
											<tbody>
												<tr v-for="m in purchaseNeedModel.detailList" :key="m.id">
													<td class="text-center">
														<v-btn class="ml-2" small tile color="success"
															@click="editDetailPurchaseNeedClick(m)">
															编辑
														</v-btn>
														<v-btn class="ml-2" small tile color="red"
															@click="removeDetailPurchaseNeedClick(m)">
															删除
														</v-btn>
													</td>
													<td class="text-center">{{purchaseNeedModel.personname}}</td>
													<td class="text-center">{{purchaseNeedModel.departmentname}}</td>
													<td class="text-center">{{m.invcode}}</td>
													<td class="text-center">{{m.invname}}</td>
													<td class="text-center">{{m.quantity}}</td>
													<td class="text-center">{{m.unitprice}}</td>
													<td class="text-center">{{m.requireddate}}</td>
													<td class="text-center">{{m.ipertaxrate}}</td>
													<td class="text-center">{{m.orderdate}}</td>
													<td class="text-center">{{m.suppliercode}}</td>
													<td class="text-center">{{m.suppliername}}</td>
													<td class="text-center">{{m.equiname}}</td>
													<td class="text-center">{{m.projectcode}}</td>
													<td class="text-center">{{m.projectname}}</td>
												</tr>
											</tbody>
										</template>
									</v-simple-table>
								</v-expansion-panel-content>
							</v-expansion-panel>
						</v-expansion-panels>
						<br />
						<v-divider></v-divider>
						<br />
						<v-row>
							<v-col cols="6">
								<v-select label="采购类型(必选)" :disabled="purchaseNeedModel.detailList.length>0"
									v-model="purchaseNeedModel.procurementtype" :items="purchaseTypeItems" dense
									outlined>
								</v-select>
							</v-col>
							<v-col cols="6">
								<v-text-field label="采购请购单据编号" disabled v-model="purchaseNeedModel.ordercode" dense
									outlined>
								</v-text-field>
							</v-col>
							<v-col cols="12">
								<departmentcomment :disabled="purchaseNeedModel.detailList.length>0"
									:selectDepartmentCommentModel="departmentCommentModel"
									:callBack="setDepartmentCallBack"></departmentcomment>
							</v-col>
							<v-col cols="12">
								<usercomment :disabled="purchaseNeedModel.detailList.length>0"
									:selectUserCommentModel="userCommentModel" :callBack="setUserCallBack">
								</usercomment>
							</v-col>
							<v-col cols="12">
								<v-row>
									<v-col cols="12" sm="6" md="5">
										<v-text-field label="供应商编码" disabled :style="temp.cVenCode"
											v-model="purchaseNeedDetail.suppliercode" dense outlined>
										</v-text-field>
									</v-col>
									<v-col cols="12" sm="6" md="5">
										<v-text-field label="供应商名称" disabled :style="temp.cVenCode"
											v-model="purchaseNeedDetail.suppliername" dense outlined>
										</v-text-field>
									</v-col>
									<v-col cols="12" sm="6" md="2">
										<v-btn class="mt-1" small tile color="primary" @click="selectSupplierClick">
											选择供应商</v-btn>
									</v-col>
								</v-row>
							</v-col>
							<v-col cols="12">
								<v-row>
									<v-col cols="12" sm="6" md="5">
										<v-text-field label="存货编码(必选)" disabled :style="temp.cVenCode"
											v-model="purchaseNeedDetail.invcode" dense outlined>
										</v-text-field>
									</v-col>
									<v-col cols="12" sm="6" md="5">
										<v-text-field label="存货名称(必选)" disabled :style="temp.cVenCode"
											v-model="purchaseNeedDetail.invname" dense outlined>
										</v-text-field>
									</v-col>
									<v-col cols="12" sm="6" md="2">
										<v-btn class="mt-1" small tile color="primary" @click="selectInventoryClick">
											选择存货
										</v-btn>
									</v-col>
								</v-row>
							</v-col>
							<v-col cols="12">
								<v-row>
									<v-col cols="12" sm="6" md="5">
										<v-text-field required label="关联的项目设备名称(非必选)" disabled :style="temp.id"
											v-model="purchaseNeedDetail.equiname" dense outlined>
										</v-text-field>
									</v-col>
									<v-col cols="12" sm="6" md="5">
										<v-text-field required label="关联的项目名称(非必选)" disabled :style="temp.id"
											v-model="purchaseNeedDetail.projectname" dense outlined>
										</v-text-field>
									</v-col>
									<v-col cols="12" sm="6" md="2">
										<v-btn class="mt-1" small tile color="primary" @click="selectProjectEquiClick">
											选择关联项目设备
										</v-btn>
									</v-col>
								</v-row>
							</v-col>
							<v-col cols="12" sm="6" md="4">
								<v-text-field required label="数量(必填)" v-model="purchaseNeedDetail.quantity" dense
									outlined>
								</v-text-field>
							</v-col>
							<v-col cols="12" sm="6" md="4">
								<v-text-field required label="单价(必填)" v-model="purchaseNeedDetail.unitprice" dense
									outlined>
								</v-text-field>
							</v-col>
							<v-col cols="12" sm="6" md="4">
								<v-text-field required label="税率(不填默认13%)" v-model="purchaseNeedDetail.ipertaxrate"
									dense outlined>
								</v-text-field>
							</v-col>
							<v-col cols="12" sm="6" md="4">
								<v-menu v-model="requireddateMenu" :close-on-content-click="false" :nudge-right="40"
									transition="scale-transition" offset-y min-width="auto">
									<template v-slot:activator="{ on, attrs }">
										<v-text-field required v-model="purchaseNeedDetail.requireddate"
											label="需求日期(必填)" readonly v-bind="attrs" v-on="on" dense outlined>
										</v-text-field>
									</template>
									<v-date-picker locale="zh-cn" v-model="purchaseNeedDetail.requireddate"
										@input="requireddateMenu = false">
									</v-date-picker>
								</v-menu>
							</v-col>
							<v-col cols="12" sm="6" md="4">
								<v-menu v-model="orderdateMenu" :close-on-content-click="false" :nudge-right="40"
									transition="scale-transition" offset-y min-width="auto">
									<template v-slot:activator="{ on, attrs }">
										<v-text-field required v-model="purchaseNeedDetail.orderdate" label="建议订货日期(必填)"
											readonly v-bind="attrs" v-on="on" dense outlined>
										</v-text-field>
									</template>
									<v-date-picker locale="zh-cn" v-model="purchaseNeedDetail.orderdate"
										@input="orderdateMenu = false">
									</v-date-picker>
								</v-menu>
							</v-col>

						</v-row>
					</v-container>
				</v-card-text>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn color="primary" class="mr-4" text @click="addDetailClick">添加</v-btn>
					<v-btn color="success" class="mr-4" text @click="purchaseOrderSubmit">保存</v-btn>
					<v-btn color="red" class="mr-4" text @click="closeCreatePurchaseNeed">关闭</v-btn>
				</v-card-actions>
			</v-card>
		</v-dialog>
		<!-- 供应商对话框 -->
		<suppliercomment :supplierCommentModel="supplierCommentModel" :callBack="setSupplierSelectCallBack">
		</suppliercomment>
		<inventorycomment :materialComment="inventoryCommentModel" :setMaterialcallBack="setInventoryCallBack">
		</inventorycomment>
		<projectequicomment :equiModel="projectEquiCommentModel" :callBack="setProjectEquiCallBack">
		</projectequicomment>
	</div>

</template>

<script>
	import projectequicomment from '../components/ProjectEquiDataList.vue'
	import suppliercomment from '../components/SupplierDataList.vue'
	import inventorycomment from '../components/InventoryDataList.vue'
	import departmentcomment from '../../spm/components/DapartmentSelect.vue'
	import usercomment from '../../spm/components/UserSelect.vue'
	export default {
		name: 'project_relation_purchase_need',
		components: {
			suppliercomment,
			inventorycomment,
			departmentcomment,
			usercomment,
			projectequicomment
		},
		data: () => ({
			query: {
				code: '',
				inventorycode: '',
				inventoryname: ''
			},
			ApprovalStatusItems: [],
			purchaseNeedHeaderList: [],
			purchaseNeedDetailHeaderList: [],
			purchaseNeedDataList: [],
			purchaseNeedTotalCount: 0,
			purchaseNeedLoading: true,
			purchaseNeedOptions: { //页数
				page: 1,
				//每页行数
				itemsPerPage: 10
			},
			vuetifyDefaultPage: {
				'items-per-page-text': '每页个数',
				'items-per-page-options': [10, 20, 50, 100, 200]
				// 'items-per-page-all-text': '100'
			},
			editPurchaseDialog: false,
			purchaseTypeItems: [],
			purchaseNeedModel: {
				detailList: []
			},
			purchaseNeedDetail: {},
			orderdateMenu: false,
			requireddateMenu: false,
			supplierCommentModel: {
				dialog: false,
				loadSupplierUrl: `PDM/PDMPurchaseNeed/LoadSupplierPage`
			},
			inventoryCommentModel: {
				dialog: false,
				bself: null, // 是否自制
				bpurchase: true, // 是否采购
				bproducing: null, // 是否在制
				loadInventoryPageUrl: `PDM/PDMPurchaseNeed/LoadInventoryPage`,
				loadInventoryClassUrl: `PDM/PDMPurchaseNeed/loadInventoryClass`,
				loadUnitsUrl: `PDM/PDMPurchaseNeed/loadUnits`,
				queryInvClassTreeUrl: `PDM/PDMPurchaseNeed/GetInvclassTree?iinvcgrade=`

			},
			departmentCommentModel: {
				loadSelectDepartmentItemsUrl: `PDM/PDMPurchaseNeed/GetDepartmentUserToSelect`,
				isReturnObj: true,
				label: '选择请购部门(必填)'
			},
			userCommentModel: {
				loadSelectUserItemsUrl: ``,
				isReturnObj: true,
				label: '选择请购用户(必填)',
				paramterUserList: []
			},
			projectEquiCommentModel: {
				dialog: false,
				url: `PDM/PDMPurchaseNeed/LoadProjectEquiPage?`
			},
			temp: {}
		}),
		watch: {
			purchaseNeedOptions: {
				handler() {
					this.loadPages()
				},
				deep: true
			},

		},
		created() {
			this.loadpurchaseNeedHeaderList()
			this.loadPurchaseTypeItems()
			// this.loadPurchaseNeedCode()
		},
		methods: {
			setDepartmentCallBack(department) {
				this.purchaseNeedModel.departmentname = department.text
				this.purchaseNeedModel.departmentcode = department.code
				this.userCommentModel.loadSelectUserItemsUrl =
					`PDM/PDMPurchaseNeed/GetUserInfoToSelect?departmentCode=${department.code}&bpsnperson=true`
			},
			setUserCallBack(user) {
				this.purchaseNeedModel.personcode = user.value
				this.purchaseNeedModel.personname = user.realname
				this.purchaseNeedModel.personid = user.id
			},
			selectSupplierClick() {
				this.supplierCommentModel.dialog = true
			},
			setSupplierSelectCallBack(supplier) {
				this.temp = supplier
				this.purchaseNeedDetail.suppliercode = supplier.cVenCode
				this.purchaseNeedDetail.suppliername = supplier.cVenName
			},
			selectInventoryClick() {
				this.inventoryCommentModel.dialog = true
			},
			setInventoryCallBack(inventory) {
				this.temp = inventory
				this.purchaseNeedDetail.invcode = inventory.cinvcode
				this.purchaseNeedDetail.invname = inventory.cinvname
			},
			selectProjectEquiClick() {
				this.projectEquiCommentModel.dialog = true
			},
			setProjectEquiCallBack(projectEqui) {
				this.temp = projectEqui
				this.purchaseNeedDetail.projectequiid = projectEqui.id
				this.purchaseNeedDetail.equiname = projectEqui.name
				this.purchaseNeedDetail.projectcode = projectEqui.project.citemcode
				this.purchaseNeedDetail.projectname = projectEqui.project.citemname
			},
			//加载ERP采购类型
			async loadPurchaseTypeItems() {
				var response = await this.$httpRequest({
					url: `PDM/PDMPurchaseNeed/GetERPPurchaseTypes`,
					method: 'get'
				})
				if (response.status == 1) {
					this.purchaseTypeItems = response.data
				} else {
					this.$message.error(response.info)
				}
			},
			//获取采购单据号
			async loadPurchaseNeedCode() {
				var response = await this.$httpRequest({
					url: `Common/GetSequenceNoCode?orderType=110&length=8`,
					method: 'get'
				})
				if (response.status == 1) {
					this.purchaseNeedModel.ordercode = response.data

				} else {
					this.$message.error(response.info)
				}
			},
			//继续添加
			addDetailClick() {
				this.purchaseNeedModel.detailList.push(this.purchaseNeedDetail)
				this.purchaseNeedDetail = {}
			},
			//编辑明细
			editDetailPurchaseNeedClick(detail) {
				this.purchaseNeedDetail = detail
			},
			//移除明细
			removeDetailPurchaseNeedClick(detail) {
				this.purchaseNeedModel.detailList.splice(detail, 1)
			},
			closeCreatePurchaseNeed() {
				this.editPurchaseDialog = false
				this.purchaseNeedModel = {
					detailList: []
				}
				this.purchaseNeedDetail = {}
			},
			//保存采购请购单
			async purchaseOrderSubmit() {
				var response = await this.$httpRequest({
					url: `PDM/PDMPurchaseNeed/CustomCreatePurchaseRequisition`,
					method: 'post',
					data: this.purchaseNeedModel
				})
				if (response.status == 1) {
					this.closeCreatePurchaseNeed()
					this.loadPages()
					this.$message.success(response.info)
				} else {
					this.$message.error(response.info)
				}
			},
			refreshLoadPages() {
				this.query.code = ''
				this.query.inventorycode = ''
				this.query.inventoryname = ''
			},

			//加载加工件
			async loadPages() {
				this.purchaseNeedLoading = true
				var response = await this.$httpRequest({
					url: `PDM/PDMPurchaseNeed/LoadPage?code=${this.query.code}&inventorycode=${this.query.inventorycode}&inventoryname=${this.query.inventoryname}&pageNumber=${this.purchaseNeedOptions.page}&pageSize=${this.purchaseNeedOptions.itemsPerPage}`,
					method: 'get',
				})
				if (response.status == 1) {
					this.purchaseNeedDataList = response.data.result
					this.purchaseNeedTotalCount = response.data.pagination.totalRecords
					this.purchaseNeedLoading = false
				} else {
					this.$message.error(response.info)
				}
			},

			async sendTOERP(item){
				var response = await this.$httpRequest({
					url: `PDM/PDMPurchaseNeed/SendTOERP?purchaserequestId=${item.id}`,
					method: 'get'
				})
				if (response.status == 1) {
					this.loadPages()
					this.$message.success(response.info)
				} else {
					this.$message.error(response.info)
				}
			},
			partSelectEvent(items) {
				this.ApprovalDialogModel.selectList = items

			},
			async openCreatePurchaseDialog() {
				await this.loadPurchaseNeedCode()
				this.editPurchaseDialog = true
			},
			//加工件头信息
			loadpurchaseNeedHeaderList() {
				this.purchaseNeedHeaderList = [{
						text: '操作',
						value: 'actions',
						align: 'center',
						filterable: true,
					},
					{
						text: '是否下发至ERP',
						value: 'issenderp',
						align: 'center',
						filterable: true,
					},
					{
						text: '单据编号',
						value: 'ordercode',
						align: 'center',
						filterable: true,
					},
					{
						text: '订单日期',
						value: 'orderdate',
						align: 'center',
						filterable: true,
					},
					{
						text: '采购类型',
						value: 'procurementtype',
						align: 'center',
						filterable: true,
					},
					{
						text: '请购人员',
						value: 'personname',
						align: 'center',
						filterable: true,
					},
					{
						text: '请购人员部门',
						value: 'departmentname',
						align: 'center',
						filterable: true,
					}
				]

				this.purchaseNeedDetailHeaderList = [
					// {
					// 	text: '操作',
					// 	value: 'actions',
					// 	align: 'center',
					// 	filterable: true,
					// },
					{
						text: '存货编号',
						value: 'invcode',
						align: 'center',
						filterable: true,
					},
					{
						text: '存货名称',
						value: 'invname',
						align: 'center',
						filterable: true,
					}, {
						text: '数量',
						value: 'quantity',
						align: 'center',
						filterable: true,
					}, {
						text: '单价',
						value: 'unitprice',
						align: 'center',
						filterable: true,
					},
					{
						text: '税率',
						value: 'ipertaxrate',
						align: 'center',
						filterable: true,
					}, {
						text: '需求日期',
						value: 'requireddate',
						align: 'center',
						filterable: true,
					}, {
						text: '建议订货日期',
						value: 'orderdate',
						align: 'center',
						filterable: true,
					},
					{
						text: '供应商名称',
						value: 'suppliername',
						align: 'center',
						filterable: true,
					},
					{
						text: '关联项目设备',
						value: 'equiname',
						align: 'center',
						filterable: true,
					},
					{
						text: '关联项目号',
						value: 'projectcode',
						align: 'center',
						filterable: true,
					},
					{
						text: '关联项目名称',
						value: 'projectname',
						align: 'center',
						filterable: true,
					},
				]

			},

		}

	}
</script>
